import type { App } from 'vue';
import Clickoutside from 'element-plus/es/directives/click-outside/index'

/**
 * @directive 自定义聚焦指令（v-focus="xxx"）
 * @directive 点击其他地方隐藏指令（v-outside="xxx"）
 * @directive 自定义粘贴指令（v-paste="xxx"）
 * @directive 自定义拖拽指令（v-drag="xxx"）
 */

export function chatDirective(app: App) {
    app.directive('focus', {
        mounted(el) {
            el.focus()
        }
    })
    app.directive('paste', {
        mounted(el, binding) {
            el.addEventListener('paste', function(event: any) {
                //这里直接监听元素的粘贴事件
                binding.value(event)
            })
        }
    })
    app.directive('ludrag', {
        mounted(el, binding) {
            // 因为拖拽还包括拖动时的经过事件，离开事件，和进入事件，放下事件，
            // 浏览器对于拖拽的默认事件的处理是打开拖进来的资源，
            // 所以要先对这三个事件进行默认事件的禁止
            el.addEventListener('dragenter', function(event: any) {
                event.stopPropagation()
                event.preventDefault()
            })
            el.addEventListener('dragover', function(event: any) {
                event.stopPropagation()
                event.preventDefault()
            })
            el.addEventListener('dragleave', function(event: any) {
                event.stopPropagation()
                event.preventDefault()
            })
            el.addEventListener('drop', function(event: any) {
                // 这里阻止默认事件，并绑定事件的对象，用来在组件上返回事件对象
                event.stopPropagation()
                event.preventDefault()
                binding.value(event)
            })
        }
    })
    // 点击其他地方隐藏指令
    app.directive('outside', Clickoutside)
}